<!--
 * @Descripttion: 课堂分析详情-内容量标
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-10-23 14:51:33
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-10-23 14:51:33
-->
<template>
	<div class="content-standard-wrapper">
		<div v-if="hasData" class="menu-wrapper">
			<div
				v-for="item in indexList"
				:key="item.code"
				class="menu-item"
				:class="{ active: currentMenuCode === item.code }"
				@click="onMenuClickHandle(item.code as string)"
			>
				<p>{{ item.name }}</p>
			</div>
		</div>
		<div v-if="false" class="fragment-btn-wrapper">
			<Plus />
			<p>新建片段</p>
		</div>
		<div
			class="fragment-content-wrapper"
			:class="{ 'has-margin-top': sliceList?.length && indexList?.length }"
		>
			<div
				v-for="item in sliceList"
				:key="item.sliceId"
				class="content-item"
				@click="onContentItemClickHandle(item.startTime)"
			>
				<div class="top-wrapper">
					<div class="left-info">
						<div class="time">
							<span v-if="item.startTime || item.startTime === 0">{{
								formatSeconds(item.startTime / 1000)
							}}</span>
							<span
								v-if="
									(item.startTime || item.startTime === 0) && (item.endTime || item.endTime === 0)
								"
								>-</span
							>
							<span v-if="item.endTime || item.endTime === 0">{{
								formatSeconds(item.endTime / 1000)
							}}</span>
						</div>
						<div v-if="false" class="edit-icon">
							<img src="@/assets/images/lessonAnalysisDetails/text-edit-normal.png" />
							<Delete />
						</div>
					</div>
					<div class="right-info">
						<div v-for="indexStr in item.indexStrList" :key="indexStr" class="right-info-btn">
							{{ indexStr }}
						</div>
					</div>
				</div>
				<div v-if="item.title" class="title-wrapper">{{ item.title }}</div>
				<div v-if="item.summary" class="detail-wrapper">{{ item.summary }}</div>
			</div>
			<div v-if="!sliceList?.length" class="empty-wrap">暂无内容</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { formatSeconds } from '@/assets/js/utils';
import { getErrorMessage, getSliceByLessonCodeAPI, getSliceTypeListAPI } from '@/api/index';
import type { BaseListItemType } from '@/api/index';
import { SliceListItemType } from './ContentStandard.type';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

const emit = defineEmits<{
	(e: 'changeVideoTime', time: number): void; // 切换视频时间
}>();

const hasData = ref(false);
onMounted(async () => {
	await Promise.all([getSliceTypeList(), getSliceByLessonCode()]);

	if (sliceList.value?.length && indexList.value?.length) {
		hasData.value = true;
	}
});

// 全部的指标列表
const indexList = ref<BaseListItemType[]>([]);
// 获取指标分组列表
const getSliceTypeList = async () => {
	try {
		const data = await getSliceTypeListAPI();
		if (data) {
			indexList.value = data
				.filter(
					(item) => item.sliceType && item.sliceTypeName && item.sliceType.includes('teaching-')
				)
				.map((item) => ({
					name: item.sliceTypeName,
					code: item.sliceType
				}));
			indexList.value.unshift({
				code: 'all',
				name: '全部'
			});
		}
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

// 切片信息
const sliceList = ref<SliceListItemType[]>([]);
// 获取切片信息
const getSliceByLessonCode = async () => {
	try {
		const data = await getSliceByLessonCodeAPI({
			lessonCode: props.lessonCode,
			sliceType: currentMenuCode.value === 'all' ? 'teaching' : currentMenuCode.value
		});

		// 处理indexList
		sliceList.value = data.map((item) => {
			const _indexStrList: string[] = [];
			if (item.sliceTypeName && item.indicatorName) {
				_indexStrList.push(`${item.sliceTypeName}-${item.indicatorName}`);
			} else if (item.sliceTypeName || item.indicatorName) {
				_indexStrList.push(`${item.sliceTypeName || ''}${item.indicatorName || ''}`);
			}
			return {
				...item,
				indexStrList: _indexStrList
			};
		});
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

const currentMenuCode = ref<string>('all');

// 点击菜单
const onMenuClickHandle = (code: string) => {
	currentMenuCode.value = code;
	getSliceByLessonCode();
};

// 点击内容项
const onContentItemClickHandle = (time: number) => {
	emit('changeVideoTime', time / 1000);
};
</script>

<style lang="scss" scoped>
.content-standard-wrapper {
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
	height: 100%;

	.menu-wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.8rem;

		.menu-item {
			padding: 0 1.3rem;
			height: 3.2rem;
			line-height: 3.2rem;
			background-color: $bg-block-color-primary;
			border-radius: 0.4rem;
			font-size: $font-size-base;
			color: $text-color-secondary;
			cursor: pointer;

			&.active {
				background-color: $color-brand;
				color: #ffffff;
			}
		}
	}

	.fragment-content-wrapper:not(.has-margin-top) {
		margin-top: 0 !important;
	}
}
</style>
